<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initail-scale=1">
	<title>首页</title>
	<link rel="stylesheet" href="./adapter.css">
	<link rel="stylesheet" href="./normalize.css">
	<link rel="stylesheet" href="./iconfont.css">
	<style>
	/* 全局样式 */
	ul,li,p {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	li {
		list-style: none;
	}
	/*头部导航条*/
	.headerbar{
		width: 100%;
		height: 3rem;
		background-color: #26b53e;
		position: fixed;
		top: 0;
		z-index: 999;
		text-align: center;
		line-height: 3rem;
	}
	.headerbar a {
		color: #fff;
		font-size: 1rem;
	}
	/* 订单 */
	.order {
		width: 100%;
		margin-top: 3rem;
	}
	.order-content {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);		
	}
	.order-content img {
		width: 80%;
	}
	.order-content p {
		line-height: 2rem;
	}
	.order-content a {
		color: #fff;
		display: block;
		padding: 0.67rem;
		background-color: #26b53e;
		border-radius: 0.2rem;
	}
	/* 底部导航栏 */
	.footerbar {
		width: 100%;
		height: 3rem;
		background-color: #26b53e;
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 999;
	}
	.footerbar a {
		flex: 1;
		position: relative;
		color: #000;
		font-size: 0.8rem;
		font-weight: 800;
	}
	.footerbarItem {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.footerbarLine {
		width: 100%;
		height: 3px;
		background-color: #fff;
		position: fixed;
		bottom: 3rem;
		z-index: 999;
	}
	.footerbarItem p {
		text-align: center;
		font-size: 1.5rem;
		color: #ccc;
	}
	</style>
</head>
<body>
	<!-- 头部导航条 -->
	<div class="headerbar">
		<a href="#" class="header-c">订单列表</a>
	</div>
	<!-- 订单 -->
	<div class="order">
		<div class="order-content">
			<img src="../static/imgs/空购物篮.png" alt="">
			<p>登陆后查看外卖订单~</p>
			<a href="">立即登陆</a>
		</div>
	</div>
	<!-- 底部导航栏 -->
	<div class="footerbarLine"></div>
	<div class="footerbar">
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-shouye"></p><span>首页</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-search"></p><span>搜索</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-danlieliebiao"></p><span>订单</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-account"></p><span>我的</span></div></a>
	</div>
</body>
</html>